<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
    <el-form-item label="结算单编号" prop="balanceCode">
      <el-input v-model="ruleForm.balanceCode" :disabled="true" style="width: 100%"></el-input>
    </el-form-item>
    <el-form-item label="应结金额" prop="settlementAmount">
      <el-input v-model="ruleForm.settlementAmount" :disabled="true" style="width: 93%"></el-input> 元
    </el-form-item>
    <el-form-item label="实际转账金额" prop="realSettlementAmount">
      <el-input v-model="ruleForm.realSettlementAmount" style="width: 93%" placeholder="格式：00.00或00.0或000"></el-input> 元
    </el-form-item>
    <el-form-item label="转账备注" prop="settlementRemark" type="textarea">
      <el-input v-model="ruleForm.settlementRemark" type="textarea"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
                 :loading="submitStatus">确定
      </el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import * as types from '../../store/mutations-type'
  import api from '../../store/api'
  var format = require('../../util/util')
  import axios from 'axios'
  export default {
    data () {
      return {
        handle: 'add',
        submitStatus: false,
        rules: {
          realSettlementAmount: [
            {required: true, message: '请输入转账金额', trigger: 'blur'}
          ],
          settlementRemark: [
            {required: true, message: '请输入转账备注', trigger: 'blur'},
            {pattern: /^(([^^<>%&',;=?$"':#!~\][{}\\/`|])*)$/, message: '不能输入特殊字符'}
          ]
        }
      }
    },
    props: ['ruleForm', 'getTableData'],
    methods: {
      submitForm (formName) {
        this.submitStatus = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var ruleForm = this.ruleForm
            ruleForm = format.formatString(ruleForm)
            axios.put(api.funSettle + '?' + ruleForm).then(response => {
              var result = response.data
              if (result.success) {
                this.$message({
                  message: '打款成功',
                  type: 'success'
                })
                this.submitStatus = false
                this.$store.dispatch(types.SETTLE_CLOSE_FORM)
                this.resetForm(formName)
              } else {
                this.$message.error({
                  title: '错误',
                  message: result.msg
                })
              }
              this.getTableData()
            }, (err) => {
              this.$message.error({
                title: '错误',
                message: err.response.data.message
              })
              this.submitStatus = false
            })
          } else {
            this.submitStatus = false
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    mounted () {
    }
  }
</script>
<style>
  .demo-ruleForm {
    width: 440px;
  }
</style>

